<template>
  <div class="main">
    <el-form :inline="true" >
        <el-form-item >
              <treeselect :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
        </el-form-item>
        <!-- <el-form-item >
            <el-select v-model="value" placeholder="请选择日期">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item> -->
         <el-form-item >
             <el-select v-model="userIds" multiple  placeholder="请选择员工">
              <el-option
                v-for="item in users"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId">
              </el-option>
            </el-select>
        </el-form-item>
         <el-form-item>
            <el-button type="cyan" icon="el-icon-search"   @click="getData">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="xsjb">
            <div class="xsjb-title"><span>销售统计</span></div>
            <div class="xsjb-content">
              <div class="xsjb-item" @click="openCustomer">
                        <div class="xsjb-item-logo">
                            <img class="logo-img" src="@/assets/icon/customer.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              新增客户
                            </div>
                            <div class="number">
                              {{data.customerCount!=null?data.customerCount:0}}
                            </div>
                        </div>
              </div>
              <div class="xsjb-item"  @click="openContact">
                        <div class="xsjb-item-logo">
                            <img class="logo-img" src="@/assets/icon/users.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              新增联系人
                            </div>
                            <div class="number">
                                {{data.customerContactCount!=null?data.customerContactCount:0}}
                            </div>
                        </div>
              </div>
              <div class="xsjb-item" @click="openVisit">
                        <div class="xsjb-item-logo">
                            <img class="logo-img" src="@/assets/icon/log.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              新增跟进
                            </div>
                            <div class="number">
                               {{data.visitCount!=null?data.visitCount:0}}
                             
                            </div>
                        </div>
              </div>
              <div class="xsjb-item" @click="openContract">
                 
                        <div class="xsjb-item-logo">
                            <img class="logo-img" src="@/assets/icon/ht.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              新增合同
                            </div>
                            <div class="number">
                              {{data.contractCount!=null?data.contractCount:0}}
                            </div>
                        </div>
                  
              </div>
              <div class="xsjb-item">
                        <div class="xsjb-item-logo">
                            <img class="logo-img" src="@/assets/icon/notice.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              合同金额
                            </div>
                            <div class="number">
                              {{data.contractMoney!=null?data.contractMoney.toFixed(2):0.00}}
                            
                            </div>
                        </div>
                      
                 
              </div>
               <!-- <div class="xsjb-item">
                  <div class="item-left">
                     
                      <div class="content">
                        <div class="logo">
                            <img src="@/assets/icon/notice.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              回款金额
                            </div>
                            <div class="number">
                                {{data.receivablesMoney!=null?data.receivablesMoney.toFixed(2):0.00}}
                            
                            </div>
                        </div>
                      
                      </div>
                  </div>
                  <div class="line"></div>
                  <div class="item-right">
                      <div class="title">
                        较上月
                      </div>
                      <div class="number">
                        0%
                      </div>
                  </div>
              </div> -->
                 <!-- <div class="xsjb-item">
                  <div class="item-left">
                     
                      <div class="content">
                        <div class="logo">
                            <img src="@/assets/icon/notice.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              提成金额
                            </div>
                            <div class="number">
                              {{data.rateMoney!=null?data.rateMoney.toFixed(2):0.00}}
                            
                            </div>
                        </div>
                      
                      </div>
                  </div>
                  <div class="line"></div>
                  <div class="item-right">
                      <div class="title">
                        较上月
                      </div>
                      <div class="number">
                        0%
                      </div>
                  </div>
              </div> -->
              <div class="xsjb-item" @click="openAudit(1)"  v-hasPermi="['crm:customer:audit']">
                        <div class="xsjb-item-logo">
                            <img class="logo-img" src="@/assets/icon/log.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              待审核客户
                            </div>
                            <div class="number">
                              {{data.auditCustomerUserCount}}
                            
                            </div>
                        </div>
              </div>
              <div class="xsjb-item" @click="openAudit(2)" v-hasPermi="['crm:contract:audit']">
                        <div class="xsjb-item-logo">
                            <img class="logo-img" src="@/assets/icon/log.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              待审核合同
                            </div>
                            <div class="number">
                                {{data.auditContractCount}}
                            
                            </div>
                        </div>
                  
              </div>
              <div class="xsjb-item" @click="openAudit(3)" v-hasPermi="['crm:receivables:audit']">
                        <div class="xsjb-item-logo">
                            <img class="logo-img" src="@/assets/icon/log.png" />
                        </div>
                        <div class="count">
                            <div class="title">
                              待审核回款
                            </div>
                            <div class="number">
                              {{data.auditReceivalbesCount}}
                            
                            </div>
                        </div>
              </div>
            </div>
             
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mycharts">
      <el-col :span="16">
        <div class="tjtb">
            <div class="tjtb-title"><img src="@/assets/icon/menu.png"><span>合同金额及目标</span></div>
            <div class="tjtb-content">
                <div class="title">本年每月销售统计</div>
                <div id="echart-month"></div>
            </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="tjtb">
            <div class="tjtb-title"><img src="@/assets/icon/menu.png"><span>业绩完成率</span></div>
            <div class="tjtb-content">
              <div id="echart-ybp"></div>
              <div class="count">
                <div class="item">
                  <div>目标金额</div>
                  <div>{{data.taskMoney}}元</div>
                </div>
                <div class="item">
                  <div>合同金额</div>
                  <div>{{data.saleMoney}}元</div>
                </div>
              </div>
            </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="customer.title" :visible.sync="customer.open" width="800px" append-to-body>
         <customer @open-customer="openCustomerDetails" ref="customer" />
    </el-dialog>
    <el-dialog :title="contract.title" :visible.sync="contract.open" width="800px" append-to-body>
         <contract @open-customer="openCustomerDetails" @open-contract="openContractDetails" ref="contract"/>
    </el-dialog>
    <el-dialog :title="contact.title" :visible.sync="contact.open" width="800px" append-to-body>
         <contact @open-customer="openCustomerDetails" ref="contact" />
    </el-dialog>
    <el-dialog :title="visit.title" :visible.sync="visit.open" width="800px" append-to-body>
         <visit @open-customer="openCustomerDetails" ref="visit"/>
    </el-dialog>
    <el-drawer
      size="50%"
      :with-header="false"
        :title="showCustomer.title" :visible.sync="showCustomer.open"
        >
          <customer-details    ref="customerdetails" />
      </el-drawer>
     


  </div>
</template>

<script>
import { getCrmMyAchievement } from "@/api/crm/achievement"
import echarts from 'echarts'
import resize from './dashboard/mixins/resize'
import logoImg from '@/assets/logo/crm.png'

import customer from "./crm/components/newCustomerList";
import contract from "./crm/components/newContractList";
import contact from "./crm/components/newContactList";
import visit from "./crm/components/newVisitList";

import customerDetails from "./crm/components/customerDetails";
import contractDetails from "./crm/components/contractDetails";

 


import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { getUserListByDeptId} from "@/api/system/user";
export default {
  mixins: [resize],
  name: 'Index',
  components: {
    Treeselect,customer,contract,contact,visit,customerDetails,contractDetails
  },
   watch: {
    // 监听deptId
    'deptId': 'currDeptChange'
  },
  data() {
    return {
        value: '5',
        deptOptions:[],
        deptId:undefined,
        userIds:undefined,
        users:[],
        options: [{
            value: '1',
            label: '今天'
          }, {
            value: '2',
            label: '昨天'
          }, {
            value: '3',
            label: '本周'
          }, {
            value: '4',
            label: '上周'
          }, {
            value: '5',
            label: '本月'
          }
          , {
            value: '6',
            label: '上月'
          }
          , {
            value: '7',
            label: '本季度'
          }
          , {
            value: '8',
            label: '上季度'
          }
          , {
            value: '9',
            label: '本年'
          }
          , {
            value: '10',
            label: '上年'
        }],
       showCustomer:{
        open:false,
        title:'客户详情'
      },
      showContract:{
        open:false,
        title:'合同详情'
      },
      customer:{
          title:'',
          open:false
      },
      contract:{
          title:'',
          open:false
      },
      contact:{
          title:'',
          open:false
      },
      visit:{
          title:'',
          open:false
      },
      logo: logoImg,
      chart: null,
      chart1: null,
      data:{
        customerCount:0,
        customerContactCount:0,
        contractCount:0,
        visitCount:0,
        receivablesCount:0,
        contractMoney:0.00,
        taskMoney:0.00,
        saleMoney:0.00,
        receivablesMoney:0.00,
        rateMoney:0.00,
        auditCustomerUserCount:0,
        auditContractCount:0,
        auditReceivalbesCount:0,

      },
       
    }
  },
   created() {
      this.getTreeselect();
      var that=this;
     
    
  },
  methods: {
    currDeptChange(val){
      console.log(val)
      this.deptId=val;
      this.getUserListByDeptId();
    },
    openAudit(type){
      if(type==1){
        this.$router.push({ path: "/audit/customerAudit" });
      }
      if(type==2){
        this.$router.push({ path: "/audit/contractAudit" });
      }
      if(type==3){
        this.$router.push({ path: "/audit/receivablesAudit" });
      }
      
    },
    getData(){
      var data;
      var that=this;
      if(this.userIds!=undefined){
          data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
      }
      else{
          data={type:this.value,deptId:this.deptId}
      }
     getCrmMyAchievement(data).then(response => {
        this.data = response.data;
          setTimeout(() => {
            that.initEchart();
            that.initEchart1();
          }, 500);
        
      });
    },
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
        console.log(this.deptOptions)
        if(response.data!=null&&response.data.length>0){
          this.deptId=response.data[0].id;
          this.getUserListByDeptId();
          
        }
      });
    },
     getUserListByDeptId() {
        this.userIds=undefined;
        var data={deptId:this.deptId};
        getUserListByDeptId(data).then(response => {
          this.users = response.data;
          this.getData();
           
        });
    },
    openContractDetails(id){
      this.showContract.open=true;
      setTimeout(() => {
        this.$refs.contractdetails.getContract(id);
      }, 500);
    },
     openCustomerDetails(id){
      this.showCustomer.open=true;
      setTimeout(() => {
        this.$refs.customerdetails.getCustomerDetails(id);
      }, 500);
    },
    openCustomer(){
        this.customer.title="新增客户";
        this.customer.open=true;
        var data;
        var that=this;
        if(this.userIds!=undefined){
            data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
        }
        else{
            data={type:this.value,deptId:this.deptId}
        }
        setTimeout(() => {
          that.$refs.customer.getList(data);
        }, 500);
    },
    openContract(){
        this.contract.title="新增合同";
        this.contract.open=true;
        var data;
        var that=this;
        if(this.userIds!=undefined){
            data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
        }
        else{
            data={type:this.value,deptId:this.deptId}
        }
        setTimeout(() => {
          that.$refs.contract.getList(data);
        }, 500);
    },
    openContact(){
        this.contact.title="新增联系人";
        this.contact.open=true;
        var data;
        var that=this;
        if(this.userIds!=undefined){
            data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
        }
        else{
            data={type:this.value,deptId:this.deptId}
        }
        setTimeout(() => {
          that.$refs.contact.getList(data);
        }, 500);
    },
    openVisit(){
        this.visit.title="新增跟进";
        this.visit.open=true;
        var data;
        var that=this;
        if(this.userIds!=undefined){
            data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
        }
        else{
            data={type:this.value,deptId:this.deptId}
        }
        setTimeout(() => {
          that.$refs.visit.getList(data);
        }, 500);
    },
    initEchart1(){
      var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['目标金额', '合同金额','回款金额','提成','积分']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                color:'#009100',
                name: '目标金额',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: this.data.taskMoneys
            },
            {
                color:'#ff9900',
                name: '合同金额',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                 data: this.data.saleMoneys
            },
             {
                color:'#073763',
                name: '回款金额',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                 data: this.data.receivablesMoneys
            },
             {
                color:'#660000',
                name: '提成',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                 data: this.data.rateMoneys
            },
             {
                color:'#a64d79',
                name: '积分',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                 data: this.data.integralMoneys
            }
        ]
    };
      this.chart1=echarts.init(document.getElementById("echart-month"));
      this.chart1.setOption(option,true);


    },
    initEchart(){
	    var ratio=0;
				if(this.data.taskMoney==0){
					ratio=100;
				}
				else{
					if(this.data.saleMoney>this.data.taskMoney){
						ratio=100;
					}
					else{
						ratio=(this.data.saleMoney/this.data.taskMoney*100).toFixed(0)
					}
				}
			

       var option = {
        series: [{
            type: 'gauge',
            axisLine: {
                lineStyle: {
                    width: 10,
                    color: [
                        [0.2, '#1c4587'],
                        [0.8, '#980000'],
                        [1, '#009100']
                    ]
                }
            },
            pointer: {
                itemStyle: {
                    color: 'auto'
                }
            },
            axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                    color: '#fff',
                    width: 4
                }
            },
            axisLabel: {
                color: 'auto',
                distance: 0,
                fontSize: 14
            },
            detail: {
                fontSize: 18,
                valueAnimation: true,
                formatter: '{value} %',
                color: 'auto'
            },
            data: [{
                value: ratio
            }]
        }]
    };
     this.chart=echarts.init(document.getElementById("echart-ybp"));
     this.chart.setOption(option,true);
 
    }
    
  }
}
</script>

<style lang="scss" scoped>

.main {
  padding: 12px;
  background-color: rgb(240, 242, 245);
   
}
.xsjb {
  border: 1px solid #e6e6e6;
  padding: 15px;
  border-radius:4px;
  background-color: white;
  .xsjb-title {
    span{
      margin-top: 5px;
      vertical-align: middle;
      font-weight: bold;
      font-size: 16px;

    }
  }
  .xsjb-content{
    padding: 10px 10px 14px;
    display: flex;
    align-items: center;
   
    flex-wrap: wrap;
    .xsjb-item{
      cursor: pointer;
      width:-webkit-calc(25% - 20px); 
      width:-moz-calc(25% - 20px); 
      width:calc(25% - 20px);
      height: 88px;
      box-shadow: 0 0 10px 0 rgba(0,0,0,.08);
      border-radius: 4px;
      margin: 10px;
      display: flex;
      align-items: center;
      .xsjb-item-logo{
        height: 88px;
        width: 88px;
        display: flex;
        align-items: center;
        justify-content:center;
        .logo-img{
          width: 40px;
          height: 40px;
        }
      }
      .count{
        height: 88px;
        flex: 1;
        display: flex;
        flex-flow: column;
        align-items:center;
        justify-content:center;
        .title{
          overflow: hidden;
          font-size: 14px;
          margin-bottom: 10px;

        }
        .number{
          font-weight: bold;
          font-size: 20px;
          margin-top: 10px;
        }
      }
       
    }
  }
}

.tjtb {
  height: 420px;
  border: 1px solid #e6e6e6;
  padding: 15px;
  border-radius:4px;
  background-color: white;
  .tjtb-title{
    img{
      margin-right: 10px;
      vertical-align: middle;
      width: 20px;
      height: 20px;

    }
    span{
      margin-top: 5px;
      vertical-align: middle;
      font-weight: bold;
      font-size: 16px;

    }
  }
  .tjtb-content{
    width: 100%;
    padding: 10px 10px 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    .title{
      color: #6c6c6c;
      font-size: 14px;
    }
    .count{
      width:100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .item{
        flex:1;
        div{
          font-size: 14px;
          color: grey;
          text-align: center;
        }
      }
    }
  }
}
 
#echart-ybp{
  width:100%;
  height:300px
}
#echart-month{
  width:100%;
  height:320px
}
.el-drawer{
    overflow: scroll
}
.vue-treeselect{
  width: 217px;
  height: 36px;
}
.el-form-item{
  margin-bottom: 10px;
}
 .vue-treeselect{
  width: 217px;
  height: 36px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>

<style lang="scss">
.vue-treeselect__control{
  display: block;
}

</style>
 